<template>
    <div>
        <header>
            <div>
                <div class="box"></div>
                <h3>北半球不冷</h3>
            </div>
            <div>
                <h4>幽默是一种艺术！</h4>
            </div>
        </header>
            <nuxt/>
        <footer>我的页脚</footer>
    </div>
</template>
<style scoped>
header{
    background-color: lightseagreen;
    min-height: 180px;
    padding-top: 20px;
}
header div:first-child{
    text-align: center;
}

header div:last-child{
    text-align: right;
    padding-right: 50px;
}
/* 左侧跳动头像 */
.box{
    height: 50px;
    width: 50px;
    margin-left: 30px;
    position: relative;
}
.box::before{
    content: '';
    height: 8px; width: 50px; background: #000; opacity: .2; border-radius: 50%;
    position: absolute;
    top: 67px;
    left: 0;
    animation: shadow .5s linear infinite;
}
.box::after{
    border-radius: 5px;
    background: rgb(221, 209, 209);
    animation: rotate .5s linear infinite;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
}
@keyframes shadow {
    0%, 100% {transform: scaleX(1);}
    50% {transform: scaleX(1.2);}
}

@keyframes rotate {
    0% {
    transform: translateY(0) ;
  }
    25% {
        transform: translateY(10px);
    }
    50% {
        transform: translateY(20px) scale(1.1, 0.9);
       
    }
    75% {
        ransform: translateY(10px) ;
    }
    100% {
        transform: translateY(0) ;
    }
}
</style>
